﻿@using Domain.Entitys

<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
@model CPC;
<div id="app" >

    <div id="app">
        <el-form   method="post" ref="ruleFormRef"
                 :model="from"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm"  >
            <table width="100%" >
                <tr>
                    <td>
                        <font color="black">您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--公共属性设置--公共属性添加 </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-button type="primary"  v-on:click="CPCAdd()">提交</el-button>
                        <el-button v-on:click="historyback()">返回</el-button>
                    </td>
                </tr>
            </table>

            <table width="100%" border="1" cellpadding="0" cellspacing="1"
                   bordercolorlight="#848284" bordercolordark="#eeeeee" class="TABLE_STYLE1">
                <tr>
                    <td class="TD_STYLE1" width="19%">属性种类 </td>
                    <td class="TD_STYLE2" width="81%">
                        <el-form-item prop="AttributeKind" style="margin-left: 0px;" >
                            <el-input v-model="from.AttributeKind"  class="INPUT_STYLE1" />
                        </el-form-item>
                        @* <el-input v-model="from.AttributeKind" placeholder="请输入属性种类"></el-input> *@
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1" width="19%">属性名称 :</td>
                    <td class="TD_STYLE2" width="81%">
                        <el-form-item prop="AttributeName" style="margin-left: 0px;"   >
                            <el-input v-model="from.AttributeName" class="INPUT_STYLE1" />
                        </el-form-item>
                    
                    </td>
                </tr>
            </table>
        </el-form>
@*         模态框 *@
        <el-dialog v-model="dialogVisible"
                   title=""
                   width="500"
                   :before-close="handleClose">
            <span>添加成功！</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button v-on:click="edit()" type="danger">继续添加</el-button>
                    <el-button type="primary" v-on:click="close()">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</div>

<script type="text/javascript">
    const { createApp, ref, reactive } = Vue
        const { ElMessage } = ElementPlus
     var app = createApp({
          setup() {
                    const formRef = ref(null);
           const dialogVisible = ref(false);
         const from=reactive({
             PbcId:0,
             AttributeKind:"",
             AttributeName:""
         
         });
             //表单验证规则
             const rules = reactive({
            AttributeKind: [
                { required: true, message: '属性种类不能为空', trigger: 'blur' },
            ],
            AttributeName: [
                { required: true, message: '属性的名称不能为空', trigger: 'blur' },

            ],
        })
             function CPCAdd(){
                  // window.location.href='/CPC/CPCAdd'
                  
              
                  axios.post("/cpc/cpcadd",null,{
                      params: from
                  })
                  .then(res => {
                      if(res.data>0){
                             ElMessage({
                            type: 'success',
                            message: '添加成功！'});
                            dialogVisible.value = true
                      }else{
                             ElMessage({
                            type: 'success',
                            message: '添加失败！'});
                      }
                     // historyback()
            }).catch(err => {
                console.info(err);
            })
            //    ruleFormRef.value.validate((valid, fields) => {
            //     if (valid) {
            //         //发ajax提交
                   
            //     }
            // })
             }
             //返回按钮
                    function historyback(){
                window.location.href = "/CPC/Index";
            }
            //继续添加方法
                    function edit(){
                window.location.href = "/CPC/CPCAdd"
            }
            //返回首页
                      function close(){
                window.location.href = "/CPC/Index"
            }
               return{
                   dialogVisible,
                   from,CPCAdd ,formRef
                   ,historyback,rules,edit,close
               }
          }
     });
      app.use(ElementPlus)
     app.mount("#app");
    </script>
    <style type="text/css">
    #app{
        background-color: #FFFFCC
    }

    body {
        background-color: #ffffcc;
    }

    .TABLE_STYLE1 {
        width: 100%;
       
    }

    .TD_STYLE1 {
        background-color: #f0f0f0;
        padding: 8px;
        font-weight: bold;
    }

    .TD_STYLE2 {
        padding: 8px;
    }

    .TD_STYLE2 {
        border-spacing: 1px;
        background-color: #FFFFBB;
        border-color: #DEDBD6;
        border: 0;
    }

    . TD_STYLE4 {
        line-height: 36px; /* 使标签高度与输入框一致 */
        vertical-align: middle;
        margin-left: 0;
        display: grid;
        place-items: center;
      
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }
    /* 去除浏览器默认宽度 */
    body .container, body main {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
    }

    body {
        font-size: 13px;
        background-color: #ffffcc;
    }

    .BUTTON_STYLE1 {
        BORDER-RIGHT: #2C59AA 1px solid;
        PADDING-RIGHT: 2px;
        BORDER-TOP: #2C59AA 1px solid;
        PADDING-LEFT: 2px;
        FONT-SIZE: 12px;
        background: linear-gradient(to bottom, #ffffff, #C3DAF5);
        BORDER-LEFT: #2C59AA 1px solid;
        CURSOR: pointer;
        COLOR: black;
        PADDING-TOP: 2px;
        BORDER-BOTTOM: #2C59AA 1px solid
    }

    .TABLE_STYLE1 {
        border: 1px solid;
        border-color: #000000;
        border-collapse: collapse;
        width: 100%;
    }

    .TD_STYLE1 {
        background-color: #FFDB6F;
        border-width: 1;
    }

    .TD_STYLE2 {
        border-spacing: 1px;
        background-color: #FFFFBB;
        border-color: #DEDBD6;
        border: 0;
    }

    .INPUT_STYLE1 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 30%
    }

    .TEXTAREA_STYLE1 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 100%;
    }

    table:nth-of-type(2) {
        border: 1px solid black;
        border-collapse: collapse;
    }

        table:nth-of-type(2) td {
            border: 1px solid black;
        }

    .el-form-item__error {
        color: var(--el-color-danger);
        font-size: 12px;
        left: 0;
        line-height: 1;
        padding-top: 2px;
        position: static !important;
        margin-left: 10px;
        top: 100%;
    }

    .el-form-item {
        display: flex;
        --font-size: 14px;
        margin-bottom: 0px !important;
    }
    </style>
